<template>
  <!-- 搜索框  -->
  <div class="p-2 pt-4 bg-white">
    <Form
      ref="formRef"
      name="advanced_search"
      class="ant-advanced-search-form"
      layout="horizontal"
      :model="formState"
      @finish="onFinish"
    >
      <Row :gutter="24">
        <Col :span="18">
          <div class="search-flex">
            <FormItem class="ml-10" name="domainId" label="选择国家" required>
              <Select v-model:value="formState['domainId']" style="width: 200px; margin-right: 6px">
                <SelectOption value="">选择国家...</SelectOption>
                <SelectOption value="1">US</SelectOption>
                <SelectOption value="2">UK</SelectOption>
                <SelectOption value="3">DE</SelectOption>
                <SelectOption value="4">FR</SelectOption>
                <SelectOption value="5">JP</SelectOption>
                <SelectOption value="6">CA</SelectOption>
                <SelectOption value="8">IT</SelectOption>
                <SelectOption value="9">ES</SelectOption>
              </Select>
            </FormItem>
            <FormItem class="ml-10" name="month_range" label="选择月份" v-bind="rangeConfig" required>
              <RangePicker
                v-model:value="formState['month_range']"
                value-format="YYYY-MM"
                picker="month"
              />
            </FormItem>
            <FormItem class="ml-10" v-if="hasSjName" name="sj_name" label="产品线">
              <a-input type="text" v-model:value="formState['sj_name']" placeholder="输入产品线"/>
            </FormItem>
            <FormItem class="ml-10" v-if="hasRoot" name="root_cate" label="根分类">
              <a-input type="text" v-model:value="formState['root_cate']" placeholder="输入根分类"/>
            </FormItem>
            <FormItem class="ml-10" v-if="hasAvg" name="avg_num" label="尾月日均单" required>
              <a-input type="number" min="1" v-model:value="formState['avg_num']" placeholder="日均单量"/>
            </FormItem>

          </div>
        </Col>
        <Col :span="6" style="text-align: right">
          <Button type="primary" html-type="submit">搜索</Button>
          <Button style="margin: 0 6px" @click="() => formRef.resetFields()">清空</Button>
          <Popconfirm  v-if="hasRoot" placement="left"
            title="确定要导出表格吗？"
            ok-text="确定"
            cancel-text="算了"
            @confirm="export_xls"
          >
            <Button type="warning" :loading="loadingState">导出</Button>
          </Popconfirm>
        </Col>
      </Row>
    </Form>
  </div>
</template>

<script lang="ts" setup>
import {FormInstance, Select, SelectOption, Form, FormItem, Row, Col, Button, RangePicker, Popconfirm, message } from 'ant-design-vue'
import {useLoading} from '/@/components/Loading'
import {reactive, ref} from 'vue'
import {exportXls} from "/@/api/demo/product";
import {downloadByOnlineUrl, downloadByUrl} from '/@/utils/file/download';

const props = defineProps({
  searchInfo: Object,
  hasAvg: Boolean,
  hasRoot: Boolean,
  hasSjName: Boolean,
  loadingState: Boolean,
  exportType: String,
})
const emit = defineEmits(['confirmSearch'])
const loadingState = ref(false)
const formRef = ref<FormInstance>()

interface FormState {
  month_range: any
  domain: string
}

const formState = reactive({
  domainId: '',
  month_range: [],
  avg_num: '',
  root_cate: '',
} as FormState)

const [openFullLoading, closeFullLoading] = useLoading({
  tip: '加载中...',
});

formState['domainId'] = props.searchInfo.domainId + ''
formState['month_range'] = props.searchInfo.month_range
formState['exportType'] = props.exportType

const rangeConfig = {
  rules: [
    {
      validator(_, value) {
        if (!value || value.length < 2) {
          return Promise.reject(new Error('请选择开始和结束月份!'))
        }
        return Promise.resolve()
      },
    },
  ],
}

const export_xls = () => {
  if (!formState['domainId'] || !formState['month_range']){
    return message.error('请筛选国家、月份区间！');
  }
  loadingState.value = true
  openFullLoading()
  exportXls(formState).then(
    (res) => {
      downloadByUrl({
        url: res,
        target: '_self',
      });
      loadingState.value = false
      closeFullLoading()
    },
    () => {
      loadingState.value = false
    },
  )
}

const onFinish = (values: any) => {
  emit('confirmSearch', values)
}

const onChange = (pageNumber: number) => {
  emit('pageClick', pageNumber)
}
</script>

<style scoped>
.search-flex {
  display: flex;
}

.ml-10 {
  margin-left: 20px;
}

.ant-form-item {
  margin-bottom: 10px !important;
}
</style>
